package net.osin.playscalajs.CSS

import com.thoughtworks.binding.Binding
import com.thoughtworks.binding.Binding.Var
import org.lrng.binding.html
import org.scalajs.dom.html.Div
import org.scalajs.dom.raw.HTMLButtonElement

import scala.scalajs.js.Date
import scala.scalajs.js.timers.setInterval

object View {
    @html def introductionDiv =
    {
      <div style="font-size:0.8em">
        <h3>Binding.scala的优点</h3>
        <ul>
          <li>简单</li>
          <li>概念少<br/>功能多</li>
        </ul>
      </div>
    }

    @html def typedButton: Binding[HTMLButtonElement] =
    {
      <button>按钮</button>
    }

    @html def comment =
    {
      <!-- 你看不见我 -->
    }

    @html def css = <style>
      {
      """
    .highlight {
      background-color: gold;
    }
    """
      }
    </style>

    @html def inlineStyle =
    {

      <section>
        <p class="highlight">Binding.scala真好用！</p>
      </section>
    }

    @html def randomParagraph =
    {
      <p>生成一个随机数： { math.random.toString }</p>
    }

    @html def myCustomDiv =
    {
      <div data:customAttributeName="attributeValue"></div>
    }

    val now = Var(new Date)
    setInterval(1000)
    {
      now.value = new Date
    }

    @html def render:Binding[Div] =
    {
      <div>
        {css.bind}
        现在时间：{ now.bind.toString }
        { introductionDiv.bind }
        { inlineStyle.bind }
        { typedButton.bind }
        { comment.bind }
        { randomParagraph.bind }
        { myCustomDiv.bind }


      </div>
    }

//    @html val autoPrintln: Binding[Unit] =
//    {
////      println(render.bind) // 在控制台中打印页面 HTML
//    }
//    autoPrintln.watch()

}
